<template>
  <div class="list search-list">
    <!-- 分类筛选 -->
    <CategroySidebar ref="categroySidebar"/>
    <!-- /分类筛选 -->
    <div class="content" style="padding-left: 70px;">
      <div class="crumbs" v-if="categoryId">
        <nuxt-link to="/" class="item-a">{{$t('commonHead.home')}}</nuxt-link>
        <span class="arrow" v-if="categoryId">></span>
        <template v-for="cate in parentCategoryList">
          <span class="item-a" v-if="categoryParentId === cate.categoryId">{{
            cate.categoryName
          }}</span>
        </template>
        <!-- <span class="arrow" v-if="categoryId">></span> -->
        <template v-for="cate in categoryList">
          <span class="item-span" v-if="categoryId === cate.categoryId">
            <span class="arrow">></span>
            {{ cate.categoryName }}
          </span>
        </template>
        <span class="arrow" v-if="prodName">></span>
        <template>
          <span class="item-span" v-if="prodName">{{ prodName }}</span>
          <span class="item-span" v-if="prodName">{{ prodName }}</span>
        </template>
      </div>
      <div class="crumbs" v-else>
        <nuxt-link to="/" class="item-a">{{$t('commonHead.home')}}</nuxt-link>
        <span class="arrow">></span>
        <span class="item-span" v-if="prodName">{{ prodName }}</span>
        <span class="item-span" v-if="st == 0">{{$t('commonHead.productList')}}</span>
        <span class="item-span" v-if="st == 1">{{$t('commonHead.newProducts')}}</span>
        <span class="item-span" v-if="st == 4">{{$t('commonHead.couponPooling')}}</span>
      </div>
      <div class="goods-sort" v-if="!st">
        <div class="sort-con categorys">
          <div class="name">{{$t('classification')}}：</div>
          <div class="group">
            <span
              class="item"
              :class="[{ active: !categoryParentId }]"
              @click="changeCategory(-1, 0)"
              >{{$t('all')}}</span
            >
            <!-- <span class="item">热卖推荐</span> -->
            <span
              v-for="cate in parentCategoryList"
              :key="cate.categoryId"
              :class="[
                'item',
                categoryParentId == cate.categoryId ? 'active' : ''
              ]"
              @click="changeCategory(0, cate.categoryId)"
              >{{ cate.categoryName }}</span
            >
          </div>
        </div>
        <div
          class="sort-con categorys"
          v-show="categoryList.length && categoryParentId"
        >
          <div class="name">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div class="group">
            <span
              v-for="subCate in categoryList"
              :key="subCate.categoryId"
              :class="[
                'item',
                categoryId == subCate.categoryId ? 'active' : ''
              ]"
              @click="changeCategory(1, subCate.categoryId)"
              >{{ subCate.categoryName }}</span
            >
          </div>
        </div>
        <div
          class="sort-con categorys"
          v-show="thCategoryList.length && categoryId"
        >
          <div class="name">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div class="group">
            <span
              v-for="threeCate in thCategoryList"
              :key="threeCate.categoryId"
              :class="[
                'item',
                thCategoryId == threeCate.categoryId ? 'active' : ''
              ]"
              @click="changeCategory(2, threeCate.categoryId)"
              >{{ threeCate.categoryName }}</span
            >
          </div>
        </div>

        <!-- <div class="sort-con distribution">
          <div class="name">配送：</div>
          <div class="group">
            <span class="item active">全部</span>
            <span class="item">包邮</span>
            <span class="item">货到付款</span>
          </div>
        </div>-->
        <div class="sort-con sorts">
          <div class="name">{{$t('sort')}}：</div>
          <div class="group">
            <span
              :class="['item', sort == 0 ? 'active' : '']"
              @click="onStsTap(0)"
              >{{$t('default')}}</span
            >
            <span
              :class="['item', sort == 1 ? 'active' : '']"
              @click="onStsTap(1)"
            >
              {{$t('sales')}}
              <i class="arrow-up" v-if="sort == 1 && orderBy == 0"></i>
              <i class="arrow-down" v-if="sort == 1 && orderBy == 1"></i>
            </span>
            <span
              :class="['item', sort == 2 ? 'active' : '']"
              @click="onStsTap(2)"
            >
              {{$t('price')}}
              <i class="arrow-up" v-if="sort == 2 && orderBy == 0"></i>
              <i class="arrow-down" v-if="sort == 2 && orderBy == 1"></i>
            </span>
            <!-- <span :class="['item',sts==3?'active':'']" @click="onStsTap(3)">收藏</span> -->
          </div>
        </div>
      </div>
      <div class="goods-list">
        <!-- 全部 -->
        <ProdItem :pale-list="dataList" :list-type="1" />
        <!-- 页码 -->
        <pagination
          v-model="current"
          :pages="pages"
          @changePage="getSearchProdPage"
        ></pagination>
        <!-- /页码 -->
      </div>
    </div>
  </div>
</template>

<script>

import ProdItem from '~/components/prod-item'
import CategroySidebar from '~/components/categroy-sidebar'
import Pagination from '~/components/pagination'

export default {
  components: {
    ProdItem,
    CategroySidebar,
    Pagination
  },
  watchQuery: ['pn', 'cpid', 'cid', 'thCid', 'sort', 'ob', 'c', 'st', 'lang'],
  data () {
    return {
      st: null,
      categoryId: null,
      goCurrent: this.$route.query.current,
      dataList: [],
      pages: 1, // 总页数
      current: this.$route.query.current || 1, // 当前页数
      prodName: '', // 搜索关键字
      discountId: this.$route.query.discountId,  // 限时特惠id
      couponId: this.$route.query.couponId,   // 优惠券id
      sort: 0,
      thCategoryId: null,
      lang: this.$route.query.lang
    }
  },
  computed: {
    parentCategoryList () {
      return this.$store.state.categoryHorizontal.parentCategoryList
    },
    categoryList () {
      return this.$store.state.categoryHorizontal.categoryList
    },
    thCategoryList () {
      return this.$store.state.categoryHorizontal.thCategoryList
    }
  },
  /**
   * st: 搜索方式 空为默认 1新品推荐 2
   * pn: 商品名称
   * cpid: 上级分类id
   * cid: 分类id
   * sort: 根据默认(0)/销量(1)/价格(2)排序
   * ob: 0正序 1倒序
   * c: 当前第几页
   * @param query
   */
  async asyncData ({ app, query }) {
    var param = {
      st: parseInt(query.st) || 0,
      current: parseInt(query.c) || 1,
      size: 12, // 每页显示多少条
    }
    var data = {}
    var url = ''
    if (param.st === 1) {
      url = '/prod/lastedProdPage'
      param = Object.assign({
        prodName: query.pn || '',
        categoryParentId: '',
        categoryId: '',
        thCategoryId: '',
        sort: 0,  // 这里的sort并不是排序 是 状态
        orderBy: 0, // 这里的orderby 才是状态
        current: 1, // 这里是页码
      }, param)

      data = Object.assign({}, param)
    } else if (param.st === 4) {
      url = '/coupon/prodListByCouponId'
      param = Object.assign({
        couponId: query.couponId,
        prodName: query.pn || '',
        categoryId: parseInt(query.thCid) || '',
        sort: parseInt(query.sort) || 0,  // 这里的sort并不是排序 是 状态
        orderBy: parseInt(query.ob) || 0, // 这里的orderby 才是状态
        current: parseInt(query.c) || 1, // 这里是页码
        isAllProdType: true
      }, param)

      data = Object.assign({}, param)
      data.categoryParentId = parseInt(query.cpid) || ''
      data.categoryId = parseInt(query.cid) || ''
      data.thCategoryId = parseInt(query.thCid) || ''
    } else {
      url = '/search/searchProdPage'
      param = Object.assign({
        prodName: query.pn || '',
        categoryId: parseInt(query.thCid) || '',
        sort: parseInt(query.sort) || 0,  // 这里的sort并不是排序 是 状态
        orderBy: parseInt(query.ob) || 0, // 这里的orderby 才是状态
        current: parseInt(query.c) || 1, // 这里是页码
        isAllProdType: true
      }, param)

      data = Object.assign({}, param)
      data.categoryParentId = parseInt(query.cpid) || ''
      data.categoryId = parseInt(query.cid) || ''
      data.thCategoryId = parseInt(query.thCid) || ''
    }
    return await app.$axios.get(url, {
      params: param
    }).then((result) => {
      data.pages = result.data.pages
      data.dataList = result.data.records
      return data
    })
  },
  watch: {
    categoryParentId () {
      this.getCategory(1)
    },
    categoryId () {
      this.getCategory(2)
    },

  },
  created () {

  },
  watch: {
    $route (to, from) {
      if(this.$route.query.st==1){
        document.title = this.$t('commonHead.newProducts')
      }
      if(this.$route.query.st==0){
        document.title = this.$t('commonHead.productList')
      }
    },
    lang () {
      this.$refs.categroySidebar.getCategoryList()
    }
  },
  mounted () {
    if (this.st === 1) {
      document.title = this.$t('commonHead.newProducts')
    } else {
      document.title = this.$t('commonHead.productList')
    }
    if (!this.thCategoryId) {
      this.getCategory(0)
    } else {
      this.getCategory(0)
      this.getCategory(1)
      this.getCategory(2)
    }
    if (this.discountId) {
      document.title = this.$t('commonHead.productList')
    }
  },
  methods: {
    /**
     * 获取分类
     * @param level 0 一级分类 1 二级分类
     * @param needSearch 是否需要搜索
     */
    getCategory (level) {
      var categoryParentId = 0
      if (level === 1) {
        categoryParentId = this.categoryParentId
      } else if (level === 2) {
        categoryParentId = this.categoryId
      }
      this.$axios.get('/category/categoryInfo?parentId=' + categoryParentId).then(({ data }) => {
        if (level === 1) {
          this.$store.commit('categoryHorizontal/initCategoryList', data)
        } else if (level == 2) { // 三级分类
          this.$store.commit('categoryHorizontal/initThCategoryList', data)
        } else {
          this.$store.commit('categoryHorizontal/initParentCategoryList', data)
        }
      })
      // setTimeout(() => { loading.close(); }, 500);
    },

    /**
     * 改变分类
     * @param level 0 一级分类 1 二级分类 2三级分类
     * @param categoryId 分类id
     */
    changeCategory (level, categoryId) {
      if (level === -1) {
        this.categoryParentId = ''
        this.categoryId = ''
        this.$store.commit('categoryHorizontal/reomveCategoryList')
      } else if (level === 0) {
        this.categoryParentId = categoryId
        this.prodName = ''
        this.$store.commit('categoryHorizontal/reomveThCategoryList')
        this.getCategory(1)
      } else if (level === 1) {
        this.categoryId = categoryId
        this.getCategory(2)
      } else if (level === 2) {
        // this.categoryParentId = this.categoryId
        this.thCategoryId = categoryId
      }
      // if (level === -1 || level === 2) {
      //   this.getSearchProdPage(1)
      // }
      if (level === -1) {
        this.getSearchProdPage()
      }
      if (level === 2) {
        this.getSearchProdPage(1)
      }
    },
    /**
     * 请求商品列表
     */
    getSearchProdPage (current) {
      if (current == undefined) {
        this.$router.push({
          path: '/list',
          query: {
            st: this.st,
          }
        })
      } else {
        this.$router.push({
          path: '/list',
          query: {
            st: this.st,
            couponId: this.couponId || '',
            cpid: this.categoryParentId || '',
            c: current,
            pn: this.prodName || '',
            cid: this.categoryId || '',
            thCid: this.thCategoryId || '',
            sort: this.sort || 0,
            ob: this.orderBy || 0
          }
        })
      }
    },
    onStsTap (sort) {
      // sort 0 默认 ， 不相同为切换排序
      if (this.sort === 0 || sort !== this.sort) {
        this.orderBy == 0
      } else {
        this.orderBy == 0 ? this.orderBy = 1 : this.orderBy = 0
      }
      this.sort = sort;
      this.current = 1;
      this.getSearchProdPage(this.current)
    }
  },
}
</script>

<style scoped src='~/assets/css/list.css'></style>
<style scoped>
.el-pagination {
  text-align: right;
  padding: 0 30px;
  padding-top: 20px;
}
.pagination .el-pagination button,
.el-pagination span:not([class*='suffix']) {
  padding: 0 8px !important;
}
.pagination .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: #fff !important;
}
.pagination .el-pagination__editor.el-input .el-input__inner {
  width: 30px !important;
}
</style>
